<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: url("../images/money.jpg") no-repeat;
            background-size: cover;
        }

        #box h1 {
            color: #000;
        }

        #box {
            width: 450px;
            height: auto;
            margin: 0 auto;
            margin-top: calc((100vh - 500px) / 2);
            border: 1px solid #999;
            text-align: center;
            background-color: #fff;
            border-radius: 20px;
        }

        #box p {
            font-size: 16px;
            font-weight: bold;
            color: rgb(71, 71, 71);
        }

        #box input {
            margin-left: 20px;
            width: 50%;
            height: 25px;
            border-radius: 8px;
            outline-style: none;
            padding-left: 10px;
            font-size: 14px;
        }

        #box a {
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: rgb(80, 80, 80);
            text-decoration: none;
            color: #fff;
            border-radius: 15px;
        }

        #box h3 {
            color: rgb(33, 134, 202);
        }
    </style>
</head>

<body>
    <div id="box">
        <h1>新增管理员</h1>
        <p>
            管理员账号:<input type="text" id="username" placeholder="管理员账号">
        </p>
        <p>
            管理员密码:<input type="text" id="userpad" placeholder="管理员密码">
        </p>
        <p>
            管理员角色:
            <select id="adminselect">
                <option value="超级管理员">超级管理员</option>
                <option value="文章管理员">文章管理员</option>
                <option value="社区管理员">社区管理员</option>
                <option value="普通管理员">普通管理员</option>
            </select>
        </p>
        <p>
            <a id="addBtn">提交</a>
            <a href="/admin/showadmin">取消返回</a>
        </p>
    </div>
    </p>


    <script>
        document.getElementById('addBtn').onclick = function () {
            let usernameValue = document.getElementById('username').value;

            let userpadValue = document.getElementById('userpad').value;

            let adminSel = document.getElementById('adminselect');
            let adminValue = adminSel.options[adminSel.selectedIndex].value;

            if (usernameValue == '') {
                alert('账号不能为空')
                return;
            } else if (userpadValue == '') {
                alert('密码不能为空')
                return;
            }
            let data = {
                "a_name": usernameValue,
                "a_password": userpadValue,
                "a_role_id": adminValue
            }
            let xhr = new XMLHttpRequest();
            xhr.open('POST', '/admin/adminadd', true)
            xhr.responseType = 'json'
            xhr.setRequestHeader('Content-Type', 'Application/x-www-form-urlencoded')
            xhr.send(`data=${JSON.stringify(data)}`)

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    if (xhr.response.code == 400) {
                        alert(xhr.response.msg)
                    } else if (xhr.response.code == 401) {
                        alert(xhr.response.msg)
                    } else if (xhr.response.code == 200) {
                        alert(xhr.response.msg)
                        location.href = '/admin/showadmin';
                    }
                }
            }
        }
    </script>


</body>

</html>